<!--TODO(crbug/905380): migrate away from HTML imports.-->
<link rel="import" href="/bower_components/google-chart/google-chart.html">
<link rel="import" href="/bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="/bower_components/polymer/polymer.html">

<dom-module id="flake-score-chart">
  <template>
    <style>
        #selection-chart {
            margin-left: 0 auto;
            height: 220px;
        }

        #formula {
          text-align: center;
        }
    </style>
    <paper-dialog id="dialog" opened=[[opened]]>
      <google-chart
        id="selection-chart"
        type="column"
        options='{{_generateChartOptions(weights)}}'
        data = '{{_getChartDataFromFlake(flake, weights)}}'>
      </google-chart>
      <div id="formula">
        [[_getFormula(flake, weights)]]
      </div>
      <div class="buttons">
        <paper-button dialog-dismiss>Close</paper-button>
      </div>
    </paper-dialog>
  </template>
  <script type="text/javascript">
    (function () {
      "use strict";

      Polymer({
        is: "flake-score-chart",
        properties: {
          // A Flake objects to use this chart to show it's counts.
          flake: {
            type: Object
          },
          weights: {
            type: Array
          }
        },

        _getFormula: function (flake, weights) {
          if (flake.flake_score_last_week == 0) {
            return 'Flake score is not calculated because there are not enough occurrences.';
          }

          let formula_str = flake.flake_score_last_week + ' = ';
          for (let i = 0; i < flake.flake_counts_last_week.length; i++) {
              let count = flake.flake_counts_last_week[i];
              if (count.flake_type == 'ci failed step') {
                formula_str += count.occurrence_count + ' * ' + this._getWeight(count.flake_type, weights);
              } else {
                formula_str += count.impacted_cl_count + ' * ' + this._getWeight(count.flake_type, weights);
              }

              if (i < flake.flake_counts_last_week.length - 1) {
                 formula_str += ' + ';
              }
          }
          return formula_str;
        },

        toggleDialog: function () {
          let dialog_width = 200 * this.weights.length;
          this.$.dialog.updateStyles({'width': dialog_width+'px'});
          this.$.dialog.toggle();
        },

        _getWeight: function (flake_type, weights) {
          for (let weight_info of weights) {
            if (weight_info[0] == flake_type) {
              return weight_info[1];
            }
          }
          return -1;
        },

        _generateChartOptions: function (weights) {
          return {
              title: 'Flake Occurrences in past 7 days',
              width: 180 * weights.length,
              height: 200,
              vAxes: { 0: { title: 'Counts' } },
              chartArea: {
                  right: 30 * weights.length,
              },
              annotations: {
                  alwaysOutside: true
              },
              vAxis: { baseline: 0 }
          }
        },

        _getCLCountRepInGraph: function (count) {
          if (count.flake_type == 'ci failed step') {
            return 'N/A';
          }
          return count.impacted_cl_count;
        },

        _getChartDataFromFlake: function (flake, weights) {
            let data = [];

            // Declares columns.
            data.push(['Flake Type', 'Occurrences', { 'role': 'annotation' },
                'Impacted CLs', { 'role': 'annotation'}]);
            for (let count of flake.flake_counts_last_week) {
                let row = [
                    count.flake_type + '\n(Weight=' + this._getWeight(count.flake_type, weights) +')',
                    count.occurrence_count, 'Occ (' + count.occurrence_count +')',
                    count.impacted_cl_count, 'CL (' + count.impacted_cl_count +')'];
                data.push(row);
            }
            return data;
        }
      });
    })();
  </script>
</dom-module>
